<template>
  <div class="second">
    <div class="header">
      <div class="left">
        <div class="title">{{ currentTab.name }}类别</div>
        <div class="dropdown-menu" v-show="currentTab.id === 2">
          <van-popover
            class="popover-wrap"
            v-model:show="showIndustryPopover"
            :actions="industryTypeList"
            @select="changeIndustryType"
          >
            <template #reference>
              <div class="level">
                <span>{{ currentIndustryType.text }}</span>
                <img
                  :src="arrowDown"
                  :class="['icon', showIndustryPopover ? 'rotate' : '']"
                  alt=""
                />
              </div>
            </template>
          </van-popover>
        </div>
      </div>
      <div class="tabs">
        <div
          v-for="item in tabList"
          :key="item.id"
          class="tab-item"
          :class="{ active: currentTab.id === item.id }"
          @click="changeTab(item)"
        >
          按{{ item.name }}
        </div>
      </div>
    </div>
    <div class="list-container">
      <MajorList
        v-show="currentTab.id === 1"
        :majorList="majorList"
        @select="handleSelectMajor"
      />
      <IndustryList
        v-show="currentTab.id === 2"
        :industryList="industryList"
        @select="handleSelectIndustry"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useVolunteerStore } from '@/store/volunteer';
import arrowDown from '@/assets/images/arrowDown.png';
import { getCivilYear, getIndustries } from '@/api/volunteer';
import MajorList from './MajorList.vue';
import IndustryList from './IndustryList.vue';

const emit = defineEmits(['confirmIndustry', 'changeIndustryType']);

const store = useVolunteerStore();
const currentCateType = computed(() => store.defaultCateType); //这个参数还是需要的
const volunteerInfo = computed(() => store.volunteerInfo);

const title = ref('产业');

const tabList = ref([
  {
    id: 1,
    name: '专业',
  },
  {
    id: 2,
    name: '产业',
  },
]);
const currentTab = ref({
  id: 1,
  name: '专业',
});

const selectMajorList = ref('');
const selectIndustryList = ref('');

const changeTab = (item) => {
  currentTab.value = item;
  if (item.id === 1) {
    store.setSecondStepData(selectMajorList.value);
  } else {
    store.setSecondStepData(selectIndustryList.value);
  }
};

const showMajorPopover = ref(false);

// 专业
const currentSchoolLevel = ref({
  text: '本科',
  value: '30',
});
const schoolLevelList = [
  { text: '本科', value: '30' },
  { text: '专科', value: '10' },
];
const handleChangeSchoolLevel = (item) => {
  currentSchoolLevel.value = item;
};

const showIndustryPopover = ref(false);
const currentIndustryType = ref({ text: '未来产业', value: 3 });
const industryTypeList = ref([
  { text: '国民经济', value: 1, className: 'popover-item' },
  { text: '工业战略新兴产业', value: 2, className: 'popover-item' },
  { text: '未来产业', value: 3, className: 'popover-item' },
]);
const changeIndustryType = (value) => {
  currentIndustryType.value = value;
  getIndustriesFn();
};

// 请求专业列表
const majorList = ref([]);
const getMajorListFn = async () => {
  const params = {
    cpType: currentCateType.value,
    subjectCombination: volunteerInfo.value.relSubject,
  };

  const res = await getCivilYear(params);
  majorList.value = res.data.map((item) => ({
    ...item,
    children: item.children.map((child) => ({
      ...child,
      showChildren: false,
      checked: false,
    })),
  }));
};
getMajorListFn();

// 请求产业列表
const industryList = ref([]);
const getIndustriesFn = async () => {
  const params = {
    industryType: currentIndustryType.value.value,
    cpType: currentCateType.value,
    subjectCombination: volunteerInfo.value.relSubject,
  };

  const res = await getIndustries(params);
  industryList.value = res.data.map((item) => ({
    ...item,
    children: item.children.map((child) => ({
      ...child,
      showChildren: false,
      checked: false,
    })),
  }));
};
getIndustriesFn();

const handleSelectMajor = (data) => {
  const temp = data.map((item) => item.name);
  selectMajorList.value = temp.join(',');
  store.setSecondStepData(selectMajorList.value);
};

const handleSelectIndustry = (data) => {
  if (data.extendJson) {
    const temp = data.extendJson.tags || '';
    if (temp) {
      selectIndustryList.value = temp;
    } else {
      // 查找本科还是专科对应的数据，但是没有数据的时候也要穿专业过去。
      selectIndustryList.value = data.extendJson.tags || '';
    }
  } else {
    selectIndustryList.value = '';
  }
  store.setSecondStepData(selectIndustryList.value);
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.popover-wrap :deep(.van-popover__content) {
  .van-popover__action {
    width: 200px;
    color: #222;
    font-size: 20px;
  }
}
.second {
  padding: 0 28px;
  .header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #bdbdbd;
    position: relative;
    box-sizing: border-box;
    padding: 28px 0;
    .left {
      display: flex;
      align-items: center;
      .title {
        font-weight: bold;
        font-size: 24px;
        color: #333;
      }
      .dropdown-menu {
        position: absolute;
        left: 122px;
        top: 50%;
        transform: translateY(-50%);
        .level {
          box-sizing: border-box;
          padding: 6px 18px;
          font-size: 22px;
          color: #555;
          background-color: #e5edff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 220px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            transition: transform 0.3s ease;
            transform: rotate(0deg);

            &.rotate {
              transform: rotate(180deg);
            }
          }
        }
        .popover-item {
          color: red;
          background-color: #dff0ff;
        }
      }
    }
    .tabs {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      .tab-item {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        padding: 12px 68px;
        border-radius: 10px;
        background: #f1f1f1;
        &:first-child {
          border-radius: 10px 0 0 10px;
        }
        &:last-child {
          border-radius: 0 10px 10px 0;
        }
        &.active {
          color: $primary-color;
          background: #e5edff;
        }
      }
    }
  }
  .list-container {
    height: calc(100vh - 324px);
  }
}
</style>
